<template>
    <div class="container">
        <div class="screen" ref="screen">
            <div class="header f-fx" @click="setFull">
                <div class="left">
                    <div class="static f-fx">
                        <img :src="weatherImg" class="weather" alt="">
                        <div class="temperature">8~13℃ 阴</div>
                        <div class="line"></div>
                        <div class="">空气质量：良</div>
                    </div>
                    <div class="f-fx list-two list-two2">
                        <div class="one" v-for="item in todayList" :key="item.text">
                            <div class="fs13"><span>{{ item.num }}</span> {{ item.unit }}</div>
                            <div class="text">{{ item.text }}</div>
                        </div>
                    </div>
                </div>
                <div class="header-bg">
                    <div class="f-pr w100">
                        <div class="title"></div>
                        <div class="left-san"></div>
                        <div class="right-san"></div>
                    </div>
                    <div class="center">
                        <div class="total-title">当前实时交易额</div>
                        <div class="total-num "><span class="unit">￥</span><span>{{ 8920856 }}</span></div>
                    </div>
                </div>
                <div class="left">
                    <div class="static static2 f-fx">
                        <div class="">{{ timeList.time }}</div>
                        <div class="line"></div>
                        <div class="temperature">{{ timeList.today }}&nbsp; {{ timeList.week }} </div>
                    </div>
                    <div class="f-fx list-two">
                        <div class="one" v-for="item in todayList" :key="item.text">
                            <div class="fs13"><span class="fs-bold">{{ item.num }}</span>{{ item.unit }}</div>
                            <div class="text">{{ item.text }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content f-fx">
                <div class="left">
                    <div class="title">
                        <div class="circle">
                        </div>
                    </div>
                    <ul>
                        <li>
                            <div class="l-title">本日订单概况</div>
                            <div class="f-fx">
                                <div class="money item f-pr">
                                    <div class="bg2"></div>
                                    <div class="label">订单金额</div>
                                    <div class="num font-num"><span>￥</span>{{ formatCurrency(10910000) }}</div>
                                </div>
                                <div class="number item f-pr">
                                    <div class="bg2"></div>
                                    <div class="label">订单笔数</div>
                                    <div class="num green font-num">783 <span class="white">笔</span></div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="l-title">本月订单概况</div>
                            <div class="f-fx">
                                <div class="money item f-pr">
                                    <div class="bg2"></div>
                                    <div class="label">订单金额</div>
                                    <div class="num font-num"><span>￥</span>{{ formatCurrency(10910000) }}</div>
                                </div>
                                <div class="number item f-pr">
                                    <div class="bg2"></div>
                                    <div class="label">订单笔数</div>
                                    <div class="num green font-num">783 <span class="white">笔</span></div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="l-title">本年订单概况</div>
                            <div class="item-width f-fx f-pr">
                                <div class="bg2 bg3"></div>
                                <div class="label">本年订单金额</div>
                                <div class="num font-num"><span>￥</span class="white">{{ formatCurrency(10910000) }}
                                </div>
                            </div>
                            <div class="item-width f-fx f-pr">
                                <div class="bg2 bg3"></div>
                                <div class="label">本年订单笔数</div>
                                <div class="num green font-num">783 <span class="white">笔</span></div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="center">
                    <div class="time-date">
                        <div class="t-title"></div>
                        <ul>
                            <li v-for="(item, index) in realData" :key="index" class="bar-bg">
                                <div class="m-title green font-num">{{ item.total }}<span class="white">{{ item.unit
                                }}</span></div>
                                <div class="proportion  font-num">{{ item.percentage }}</div>
                                <div class="m-des">{{ item.text }}</div>
                            </li>
                        </ul>
                    </div>
                    <div class="columnar" id="columnar" ref="columnarDom"></div>

                </div>
                <div class="left l-bg f-pr">
                    <div class="title title2">
                        <div class="circle"></div>
                    </div>
                    <!-- 饼图 -->
                    <div class="chartsGl" id="charts" ref="pieDom"></div>
                    <!-- 饼图下面的底座 -->
                    <div class="buttomCharts"></div>
                    <div class="pie-legend">
                        <ul>
                            <li v-for="(item, index) in pieData" :key="index">
                                <div class="p-title f-fx"><i
                                        :style="{ 'background': item.itemStyle.color, 'box-shadow': '0 0  2px 2px ' + item.itemStyle.shadow }"></i>{{
                                    item.name }}</div>
                                <div class="f-fx f-fx-bt  font-num">
                                    <span class="unit">￥</span>
                                    <span class="num">{{ formatCurrency(item.value) }}</span>
                                    <span class="percentage">{{ (item.value / pitSum * 100).toFixed(2) + "%"
                                    }}</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getScreen } from '@/api/factory/screen/index';
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue';
import { useNowTime, getLastDays, formatCurrency } from './../hooks/useCommon'
import * as echarts from 'echarts';
import autofit from "autofit.js";
// import * as d3 from 'd3';
import 'echarts-gl';
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();

import weatherImg from '@/assets/images/bigScreen/weather.png';
import todayImg from '@/assets/images/bigScreen/iconbg1.png';
// 今日订单数 今日退单数
const todayList = [{
    text: "今日退单数",
    num: "123",
    unit: "笔",
    imgUrl: todayImg
}, {
    text: "今日退单数",
    num: "123",
    unit: "笔",
    imgUrl: todayImg
}]

// 今日实时数据
// import realImg from '@/assets/images/bigScreen/ani-bar.gif';
const realData = [{
    text: "平台成交笔数",
    total: '12345',
    unit: "笔",
    percentage: "33%",
    // imgUrl: realImg,
},
{
    text: "电商成交笔数",
    total: '12345',
    unit: "笔",
    percentage: "33%",
    // imgUrl: realImg,
},
{
    text: "其他渠道成交笔数",
    total: '12345',
    unit: "笔",
    percentage: "33%",
    // imgUrl: realImg,
},
{
    text: "平台成交金额",
    total: '12345',
    unit: "笔",
    percentage: "33%",
    // imgUrl: realImg,
},
{
    text: "电商成交金额",
    total: '12345',
    unit: "笔",
    percentage: "33%",
    // imgUrl: realImg,
},
{
    text: "其他渠道成交金额",
    total: '12345',
    unit: "笔",
    percentage: "33%",
    // imgUrl: realImg,
},

]

const baseUrl =
    import.meta.env.VITE_APP_BASE_API;

function extractIpFirstNumber(url) {
    const urlObj = new URL(url);
    // 使用正则表达式匹配IP地址的第一个数字
    const ipPattern = /:\/\/([^\/:]+)(?=\:|$)/;
    const match = url.match(ipPattern);
    let domainPrefix = url.split('//')[1].split('.')[0];
    const queryParams = {};
    urlObj.searchParams.forEach((value, key) => {
        queryParams[key] = value;
    });
    console.log(domainPrefix)
    // 返回解析结果
    return {
        domainPrefix: domainPrefix,
        baseURL: `http://${domainPrefix}.${baseUrl.split('http://')[1]}`,
        queryParams: queryParams
    };
}
//获取数据大屏展示内容盒子的DOM元素
let screen = ref()
const timer = ref(null) as any;
const timeList = ref({}) as any;
onMounted(() => {
    autofit.init({
        dh: 1080,
        dw: 1920,
        el: "#app",
        resize: true
    },
        false
    )
    timeList.value = useNowTime();
    timer.value = setInterval(() => {
        timeList.value = useNowTime()
    }, 1000)

    // 获取柱状图
    getColumar()

    // 饼图
    nextTick(() => {
        getInitPie()
    })
    if (route.query.key) {
        const data = extractIpFirstNumber(window.location.href);
        getScreen({
            tenantId: data.queryParams.tenentID ? data.queryParams.tenentID : data.queryParams.tenant, //data.tenant ? data.tenant : '',
            tenantCode: data.domainPrefix
        }).then(response => {
            if (response.code == 200 && response.data == route.query.key) {

            } else {
                router.replace("/401")
            }
        });
    } else {
        router.replace("/401")
    }
})
onBeforeUnmount(() => {
    autofit.off()
})
// 柱状图
const columnarDom = ref(null);
const days = getLastDays(30);
let newDays = ref([]) as any;
const numArr1 = ref([]) as any;
const numArr2 = ref([]) as any;
const numArr3 = ref([]) as any;
const str1: any = ref(0);
const str2: any = ref(0);
const str3: any = ref(0);
const numTotalArr = ref([]) as any;
const numTotalArrNew = ref([]) as any;
days.forEach(item => {
    newDays.value.push(item.replace("-", '.'));
    str1.value = Math.floor(Math.random() * 150) + 300
    str2.value = Math.floor(Math.random() * 200) + 240
    str3.value = Math.floor(Math.random() * 100) + 80
    numArr1.value.push(str1.value);
    numArr2.value.push(str2.value);
    numArr3.value.push(str3.value);
    numTotalArr.value.push(str1.value + str2.value + str3.value)
})


const maxNum = Math.max.apply(null, numTotalArr.value);
const maxNumNEW = Math.ceil(maxNum / 5);
const maxNumNEW2 = Math.ceil(maxNumNEW / 100) * 100;

days.forEach(item => {
    numTotalArrNew.value.push(maxNumNEW2 * 5)
})
const usedmemoryInstance = shallowRef();
const getColumar = () => {
    usedmemoryInstance.value = echarts.init(columnarDom.value);
    usedmemoryInstance.value.setOption({
        legend: {
            data: ["平台销量", "电商销量", "其他渠道"],
            itemHeight: 5,
            itemWidth: 12,
            bottom: 5,
            itemGap: 40,
            textStyle: {
                color: '#fff',
                fontSize: 16
            },
        },
        grid: {
            left: "0",
            right: "0",
            top: "0",
            bottom: '50',
            containLabel: true
        },
        tooltip: {
            backgroundColor: "transparent",
            trigger: "axis",
            renderMode: "html",
            className: "bar-tooltip",
            // alwaysShowContent: true,//todo
            formatter: function (params) {
                let res = ""
                for (var i = 0; i < params.length; i++) {
                    if (params[i].seriesName != 'test') {
                        res += `<div class="formatter">
                  <i>${params[i].seriesName}</i>  &nbsp;&nbsp;&nbsp;
                  <span>${params[i].data}&nbsp;</span>笔
                  </div>`;
                    }

                }
                return res;
            },
            axisPointer: {
                type: 'none'
            },
            textStyle: {
                color: '#fff'
            }
        },
        series: [{
            name: 'test',
            type: 'bar',
            boundaryGap: false,
            animationDuration: 0, //关键代码  初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果：
            animationDurationUpdate: 0, //关键代码  数据更新动画的时长。支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果：
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(1, 58, 128, 0.48)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(1, 58, 128, 0)' // 100% 处的颜
                    }],
                    global: false // 缺省为 false
                },
            },
            emphasis: {
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(8, 94, 199, 1)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(8, 94, 199, 0)' // 100% 处的颜
                        }],
                        global: false // 缺省为 false
                    }
                }

            },
            data: numTotalArrNew.value,
            barWidth: 28,
            z: 1, //层级问题，加上嗯，这个必须加嗯，
        },
        {
            name: "平台销量",
            type: "bar",
            data: numArr1.value,
            stack: '总量',
            barWidth: 13,
            itemStyle: {
                color: '#1D92FF'
            },
            barGap: '-75%',
        },
        {
            name: "电商销量",
            type: "bar",
            data: numArr2.value,
            stack: '总量',
            itemStyle: {
                color: '#31FFBE'
            },
        },
        {

            name: "其他渠道",
            type: "bar",
            data: numArr3.value,
            stack: '总量',
            itemStyle: {
                color: '#FCD45F'
            },

        }
        ],
        xAxis: {
            type: 'category',
            data: newDays.value,
            min: 0,
            axisTick: {
                show: false, // 不显示坐标轴刻度线
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                color: '#fff', // 设置 x 轴文字颜色
                interval: 0,
                margin: 20

            },
            axisLine: {
                show: true,
                z: 10,
                lineStyle: {
                    type: "solid",
                    color: '#059EFF',
                }
            },
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false // 不显示坐标轴刻度线
            },
            axisLabel: {
                show: false, // 不显示坐标轴上的文字
            },
            axisLine: {
                show: false,
                z: 2,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: "dashed",
                    color: "rgba(127, 214, 255, .4)",
                },
                z: 1
            }
        },
    });
    startAutoHighlight();
    nextTick(() => {
        initColumnar();
    })
}
// 柱状图轮播
let currentIndex = 0; // 当前高亮的数据项索引
const dataLength = days.length; // 获取数
const intervalId = ref();

function startAutoHighlight() {
    // 设置定时器，每隔1秒切换一次高亮项
    intervalId.value = setInterval(() => {
        // 取消之前的高亮项（如果需要）
        usedmemoryInstance.value.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex // 处理索引超出范围的情况
        });

        // 高亮当前项
        usedmemoryInstance.value.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex
        });

        // 更新当前索引
        currentIndex = (currentIndex + 1) % dataLength;
    }, 1000);
}

function stopAutoHighlight() {
    clearInterval(intervalId.value);
}

function initColumnar() {
    let columnarId = document.getElementById("columnar");
    // 添加鼠标悬停事件监听器（可选）
    columnarId.addEventListener('mouseover', (params) => {
        console.log("jinru")
        stopAutoHighlight();
    });

    // 添加鼠标移开事件监听器（可选）
    columnarId.addEventListener('mouseout', () => {
        console.log("离开")
        startAutoHighlight();
    });
}

// 饼图
const pieDom = ref(null);
const pieData = [
    { name: '商品1', value: 124, itemStyle: { color: 'rgb(254, 200, 101)', shadow: "rgba(254, 200, 101,0.3)" } },
    { name: '商品2', value: 18, itemStyle: { color: 'rgb(100, 218, 135)', shadow: "rgba(100, 218, 135,0.3)" } },
    { name: '商品3', value: 178, itemStyle: { color: 'rgb(125, 227, 229)', shadow: "rgba(125, 227, 229,0.3)" } },
    { name: '商品4', value: 148, itemStyle: { color: 'rgb(155, 130, 241)', shadow: "rgba(155, 130, 24,0.3)" } },
    { name: '商品5', value: 178, itemStyle: { color: 'rgb(80, 168, 255)', shadow: "rgba(80, 168, 255,0.3)" } },
    { name: '商品6', value: 178, itemStyle: { color: 'rgb(240, 77, 92)', shadow: "rgba(240, 77, 92,0.3)" } },
    { name: '商品7', value: 458, itemStyle: { color: 'rgb(80, 168, 255)', shadow: "rgba(80, 168, 255,0.3)" } },
    { name: '商品8', value: 478, itemStyle: { color: 'rgb(239, 116, 52)', shadow: "rgba(239, 116, 52,0.3)" } }
];
const pitSum = pieData.reduce((accumulator, currentValue) => accumulator + currentValue.value, 0);
const pieInstance = shallowRef()
const getInitPie = () => {
    pieInstance.value = echarts.init(pieDom.value);
    const option = getPie3D(pieData, 0);
    pieInstance.value.setOption(option);
    // startAutoHighlight2();
    // nextTick(() => {
    //     initColumnar2();
    // })
}


//配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
function getPie3D(pieData, internalDiameterRatio) {
    let series = [];
    let sumValue = 0;
    let startValue = 0;
    let endValue = 0;
    let legendData = [];
    let legendBfb = [];
    let k = 1 - internalDiameterRatio;
    pieData.sort((a, b) => {
        return b.value - a.value;
    });
    // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
    for (let i = 0; i < pieData.length; i++) {
        sumValue += pieData[i].value;
        let seriesItem = {
            //名称
            name: typeof pieData[i].name === "undefined" ?
                `series${i}` : pieData[i].name,
            type: "surface",
            //是否为参数曲面（是）
            parametric: true,
            //曲面图网格线（否）上面一根一根的
            wireframe: {
                show: false,
            },
            pieData: pieData[i],
            pieStatus: {
                selected: false,
                hovered: false,
                k: k,
            },
            itemStyle: {}

        };

        //曲面的颜色、不透明度等样式。
        if (typeof pieData[i].itemStyle != "undefined") {
            let itemStyle = {} as any;
            typeof pieData[i].itemStyle.color != "undefined" ?
                (itemStyle.color = pieData[i].itemStyle.color) :
                null;
            typeof pieData[i].itemStyle.opacity != "undefined" ?
                (itemStyle.opacity = pieData[i].itemStyle.opacity) :
                null;
            seriesItem.itemStyle = itemStyle;
        }
        series.push(seriesItem);
    }

    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
    legendData = [];
    legendBfb = [];
    for (let i = 0; i < series.length; i++) {
        endValue = startValue + series[i].pieData.value * 1;
        series[i].pieData.startRatio = startValue / sumValue;
        series[i].pieData.endRatio = endValue / sumValue;
        series[i].parametricEquation = getParametricEquation(
            series[i].pieData.startRatio,
            series[i].pieData.endRatio,
            false,
            false,
            k,
            series[i].pieData.value
        );
        startValue = endValue;
        let bfb = fomatFloat(series[i].pieData.value / sumValue, 4);
        legendData.push({
            name: series[i].name,
            value: bfb,
        });
        legendBfb.push({
            name: series[i].name,
            value: bfb,
        });
    }
    //(第二个参数可以设置你这个环形的高低程度)
    let boxHeight = getHeight3D(series, 25); //通过传参设定3d饼/环的高度
    // 准备待返回的配置项，把准备好的 legendData、series 传入。

    let option = {
        //移动上去提示的文本内容
        tooltip: {
            backgroundColor: "transparent",
            borderColor: "transparent",
            renderMode: "html",
            className: "pie-tooltip",
            // alwaysShowContent: true,
            confine: true,
            extraCssText: "z-index: -1;",
            position: function (point, params, dom, rect, size) {
                return [50, 110]
            },
            formatter: (params) => {
                if (
                    params.seriesName !== "mouseoutSeries" &&
                    params.seriesName !== "pie2d"
                ) {
                    let bfb = (
                        (option.series[params.seriesIndex].pieData.endRatio -
                            option.series[params.seriesIndex].pieData.startRatio) *
                        100
                    ).toFixed(2);
                    const value = option.series[params.seriesIndex].pieData.value;
                    return (
                        `<div class="fx">` +
                        `<div class="data"><div>数量<span class="mr">${value}</span></div>` +
                        `<div>占比<span class="mr2">${bfb}%</span></div></div>` +
                        `<div class="title">${params.seriesName}</div>` +
                        `<div class="mark-fx"></div></div>`
                    );
                }
            },
        },
        //这个可以变形
        xAxis3D: {
            min: -1,
            max: 1,
        },
        yAxis3D: {
            min: -1,
            max: 1,
        },
        zAxis3D: {
            min: -1,
            max: 1,
        },
        //此处是修改样式的重点
        grid3D: {
            show: false,
            boxHeight: boxHeight, //圆环的高度
            //这是饼图的位置
            left: -12,
            top: 45,
            viewControl: {
                //3d效果可以放大、旋转等，请自己去查看官方配置
                alpha: 18, //饼图翻转的程度
                beta: 30,
                distance: 800, //调整视角到主体的距离，类似调整zoom(这是整体大小)
                rotateSensitivity: 0, //设置为0无法旋转
                zoomSensitivity: 0, //设置为0无法缩放
                panSensitivity: 0, //设置为0无法平移
                autoRotate: true, //自动旋转
            },
        },
        series: series,
    };
    return option;
};



// 生成扇形的曲面参数方程 生成 3 D 扇形环曲面：【 getParametricEquation 函数说明】
// startRatio（ 浮点数）: 当前扇形起始比例， 取值区间[0, endRatio)
// endRatio（ 浮点数）: 当前扇形结束比例， 取值区间(startRatio, 1]
// isSelected（ 布尔值）: 是否选中， 效果参照二维饼图选中效果（ 单选）
// isHovered（ 布尔值）: 是否放大， 效果接近二维饼图高亮（ 放大） 效果（ 未能实现阴影）
// k（ 0~1 之间的浮点数）： 用于参数方程的一个参数， 取值 0~1 之间， 通过「 内径 / 外径」 的值换算而来。
// h: 饼图的初始高度 **
//     ** ** ** ** ** ** ** ** ** ** ** * /

function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
    const midRatio = (startRatio + endRatio) / 2;
    const startRadian = startRatio * Math.PI * 2;
    const endRadian = endRatio * Math.PI * 2;
    const midRadian = midRatio * Math.PI * 2;
    // 如果只有一个扇形，则不实现选中效果。
    if (startRatio === 0 && endRatio === 1) {
        isSelected = false;
    }
    k = typeof k !== 'undefined' ? k : 1 / 3;
    const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
    const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
    // 鼠标滑过时外环放大大小
    const hoverRate = isHovered ? 1.05 : 1;
    // 返回曲面参数方程
    return {
        u: {
            min: -Math.PI,
            max: Math.PI * 3,
            step: Math.PI / 32,
        },

        v: {
            min: 0,
            max: Math.PI * 2,
            step: Math.PI / 20,
        },

        x(u, v) {
            if (u < startRadian) {
                return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
            }
            if (u > endRadian) {
                return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
            }
            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
        },

        y(u, v) {
            if (u < startRadian) {
                return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
            }
            if (u > endRadian) {
                return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
            }
            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
        },

        z(u, v) {
            if (u < -Math.PI * 0.5) {
                return Math.sin(u);
            }
            if (u > Math.PI * 2.5) {
                return Math.sin(u) * h * 0.1;
            }
            // 当前图形的高度是Z根据h（每个value的值决定的）
            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
        },
    };
}
//这是一个自定义计算的方法
function fomatFloat(num, n) {
    var f = parseFloat(num);
    if (isNaN(f)) {
        return false;
    }
    f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
    var s = f.toString();
    var rs = s.indexOf(".");
    //判定如果是整数，增加小数点再补0
    if (rs < 0) {
        rs = s.length;
        s += ".";
    }
    while (s.length <= rs + n) {
        s += "0";
    }
    return s;
};
//获取3d饼图的最高扇区的高度
function getHeight3D(series, height) {
    series.sort((a, b) => {
        return b.pieData.value - a.pieData.value;
    });
    return (height * 20) / series[0].pieData.value;
}

const intervalId2 = ref();
let currentIndex2 = 0; // 当前高亮的数据项索引
function startAutoHighlight2() {
    // 设置定时器，每隔1秒切换一次高亮项
    // intervalId2.value = setInterval(() => {
    //     // 高亮当前项
    //     pieInstance.value.dispatchAction({
    //         type: 'showTip',
    //         seriesIndex: 0,
    //         dataIndex: currentIndex2
    //     });

    //     // 更新当前索引
    //     currentIndex2 = (currentIndex2 + 1) % pieData.length;
    // }, 1000);
}

function stopAutoHighlight2() {
    clearInterval(intervalId2.value);
}

function initColumnar2() {
    let columnarId = document.getElementById("charts");
    // 添加鼠标悬停事件监听器（可选）
    columnarId.addEventListener('mouseover', (params) => {
        stopAutoHighlight2();
    });

    // 添加鼠标移开事件监听器（可选）
    columnarId.addEventListener('mouseout', () => {
        console.log("离开")
        startAutoHighlight2();
    });
}

// 关闭定时器
onBeforeUnmount(() => {
    clearInterval(timer.value);
    timer.value = null;
})


// 全屏
const isFullScreen = ref(false);

const setFull = () => {
    if (!document.fullscreenElement && !isFullScreen.value) {
        // 进入全屏
        document.documentElement.requestFullscreen().then(() => {
            isFullScreen.value = true;
        });
    }
}

// 监听全屏状态变化
document.addEventListener('fullscreenchange', () => {
    isFullScreen.value = !!document.fullscreenElement;
});
</script>

<style lang="scss" scoped>
/*字体*/

@font-face {
    font-family: 'DIN';
    src: url("./../../assets/fonts/DIN-Medium-2.otf");
}

.DIN {
    font-family: 'DIN';
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url("./../../assets/fonts/BarlowCondensed.ttf") format('truetype');
}

.container {
    width: 1920px;
    height: 1080px;
    background: url('@/assets/images/bigScreen/bg.png') no-repeat;
    background-size: 100% auto;
    color: #fff;
    font-size: 13px;
    font-family: Source Han Sans CN;
    font-weight: 500;

    .screen {
        padding: 0 16px;
    }

    .font-num {
        font-family: "Barlow Condensed";
    }

    .f-fx {
        display: flex;
    }

    .header {
        width: 100%;
        background: url('@/assets/images/bigScreen/topbg.png') no-repeat;
        background-size: 100% auto;
        justify-content: space-between;
        padding: 0 12px;
        position: relative;

        .header-bg {
            flex: 1;

            .w100 {
                width: 100%;
                height: 100px;
            }

            .title {
                width: 500px;
                height: 54px;
                background: url('@/assets/images/bigScreen/toptitle2.png') center no-repeat;
                background-size: 100% auto;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -35px;
                margin-left: -250px;
            }

            .left-san {
                width: 70px;
                height: 26px;
                background-image: url('@/assets/images/bigScreen/san3.png'), url('@/assets/images/bigScreen/san2.png'), url('@/assets/images/bigScreen/san1.png');
                background-size: 15px, 20px, 22px;
                background-repeat: no-repeat, no-repeat, no-repeat;
                background-position: left center, center center, right center;
                /* 初始位置 */
                position: absolute;
                top: 50%;
                left: 50px;
                margin-top: -27px;
                animation: ani-show 2s infinite linear;
            }

            .right-san {
                width: 70px;
                height: 26px;
                background-image: url('@/assets/images/bigScreen/san3.png'), url('@/assets/images/bigScreen/san2.png'), url('@/assets/images/bigScreen/san1.png');
                background-size: 15px, 20px, 22px;
                background-repeat: no-repeat, no-repeat, no-repeat;
                background-position: left center, center center, right center;
                transform: rotate(180deg);
                position: absolute;
                right: 50px;
                top: 50%;
                margin-top: -27px;
                animation: ani-show2 2s infinite linear;
            }

            .center {
                height: 216px;
                background: url('@/assets/images/bigScreen/total.png') no-repeat;
                background-size: 100% auto;
                text-align: center; // margin-top: 56px;
                font-weight: bold;

                .total-title {
                    margin: 14px auto 0;
                    text-align: center;
                    font-size: 26px;
                    padding: 0 34px;
                    display: inline-block;
                    background: url('@/assets/images/bigScreen/leftsan.png') left center no-repeat, url('@/assets/images/bigScreen/rightsan.png') right center no-repeat;
                    background-size: 18px auto;
                    font-style: italic;
                }

                .total-num {
                    font-size: 66px;
                    line-height: 88px;
                    background-image: -webkit-linear-gradient(-90deg, #fff, rgba(255, 220, 29, 1)); //
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    font-family: SourceHanSansCN-Bold;
                    font-style: italic;

                    .unit {
                        font-size: 40px;
                        color: #FFF;
                        font-weight: 500;
                    }
                }
            }
        }

        .title {
            width: 500px;
            height: 54px;
            background: url('@/assets/images/bigScreen/toptitle2.png') center no-repeat;
            background-size: 100% auto;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -35px;
            margin-left: -296px;
        }

        .left {
            padding-top: 30px;
            width: 532px;

            .list-two {
                justify-content: end;
            }

            .list-two2 {
                justify-content: left;
            }

            .static {
                line-height: 20px;
                color: #ffffff;
                text-align: center;
                font-size: 16px;

                .temperature {
                    font-size: 20px;
                }

                .weather {
                    width: 16px;
                    height: 16px;
                    margin-right: 6px;
                }

                .line {
                    width: 1px;
                    margin: 0 10px 0 8px;
                    background: url('@/assets/images/bigScreen/icon-line.jpg') center center no-repeat;
                    background-size: 100% auto;
                }
            }

            .static2 {
                flex-direction: row-reverse;
            }

            .list-two {
                // padding-left: 32px;
                padding-top: 36px;

                .one {
                    width: 226px;
                    height: 200px;
                    background: url('@/assets/images/bigScreen/iconbg1.png') center bottom no-repeat;
                    background-size: 100% auto;
                    text-align: center;
                    color: #fff;

                    .fs13 {
                        line-height: 52px;

                        span {
                            color: #30FFF8;
                            font-size: 30px;
                            font-weight: bold;
                            font-family: 'Barlow Condensed';
                        }
                    }

                    .text {
                        font-size: 20px;
                    }
                }
            }
        }
    }

    .content {
        width: 100%;
        padding: 0 16px;
        justify-content: space-between;
        background: url('@/assets/images/bigScreen/footerbg2.png') center bottom no-repeat;
        background-size: 100% auto;
        padding-bottom: 83px;

        .left {
            width: 425px;
            height: 717px;
            background: url('@/assets/images/bigScreen/leftbg.png') no-repeat;
            background-size: cover;
            padding: 0 21px 0 13px;
            margin-top: -26px;

            .title {
                height: 52px;
                line-height: 52px;
                background: url('@/assets/images/bigScreen/index-title1.png') no-repeat;
                background-size: cover;
                padding-left: 70px;
                font-size: 24px;
                font-weight: bold;
                margin-top: 46px;

                .circle {
                    width: 52px;
                    height: 52px;
                    background: url('@/assets/images/bigScreen/icon-circle.png') left center no-repeat;
                    background-size: 100% auto;
                    border-radius: 50%;
                    position: relative;
                    left: -70px;
                    top: 0;
                    animation: rotate 2s linear infinite;
                }
                
            }

            .title2 {
                background: url('@/assets/images/bigScreen/index-title2.png') no-repeat;
                background-size: cover;
            }

            .l-title {
                line-height: 25px;
                background: url('@/assets/images/bigScreen/level-bg.png') no-repeat;
                background-size: cover;
                padding-left: 23px;
                font-size: 18px;
                margin-top: 21px;
                font-weight: bold;
                margin-bottom: 22px;
            }

            .t-title {
                width: 454px;
                background: url('@/assets/images/bigScreen/titlebg-middle.png') no-repeat;
                background-size: 100% auto;
                text-align: center;
            }

            .item {
                height: 80px;
                padding-left: 73px;

                .label {
                    font-size: 13px;
                    line-height: 21px;
                    margin-top: 12px;
                    margin-bottom: 5px;
                    font-weight: 600;
                }

                .num {
                    line-height: 30px;
                    color: #FFD65F;
                    font-size: 20px;

                    span {
                        font-size: 12px;

                        &.white {
                            color: #fff;
                            font-weight: 500;
                        }
                    }
                }
            }

            .money {
                width: 190px;
                background: url('@/assets/images/bigScreen/icon-bg1.png') no-repeat;
                background-size: 100% auto;
                margin-right: 16px;
            }

            .number {
                width: 180px;
                background: url('@/assets/images/bigScreen/icon-bg2.png') no-repeat;
                background-size: 100% auto;
            }

            .item-width {
                width: 100%;
                height: 86px;
                line-height: 86px;
                padding: 0 30px 0 100px;
                justify-content: space-between;
                background: url('@/assets/images/bigScreen/icon-bg4.png') no-repeat;
                background-size: cover;

                &:nth-child(2) {
                    background: url('@/assets/images/bigScreen/icon-bg3.png') no-repeat;
                    background-size: 100% auto;
                    margin-bottom: 12px;
                }

                .label {
                    font-size: 13px;
                }

                .num {
                    color: #FFD65F;
                    font-size: 20px;

                    span {
                        font-size: 12px;

                        &.white {
                            color: #fff;
                            font-weight: 500;
                        }
                    }
                }
            }

            .num.green {
                color: #30FFF8;
            }
        }

        .l-bg {
            background: url('@/assets/images/bigScreen/rightbg.png') no-repeat;
            background-size: cover;
            overflow: hidden;
            margin-right: 0;
        }

        .center {
            width: 930px;

            .time-date {
                margin-bottom: 50px;

                .t-title {
                    width: 100%;
                    height: 36px;
                    background: url('@/assets/images/bigScreen/first-title.png') center center no-repeat;
                    background-size: contain;
                    margin-top: 10px;
                }

                ul {
                    padding: 0 30px;
                    display: flex;
                    justify-content: space-between;
                    margin-top: 30px;

                    li {
                        width: 122px;
                        text-align: center;

                        .m-title {
                            line-height: 45px;
                            font-size: 30px;
                        }

                        .proportion {
                            font-size: 27px;
                            height: 88px;
                            line-height: 38px;
                        }

                        &.bar-bg {
                            background: url('@/assets/images/bigScreen/ani-bar.gif') center top no-repeat;
                            background-size: 120% auto;
                        }

                        .m-des {
                            line-height: 23px;
                            font-size: 15px;
                        }
                    }
                }
            }

            .columnar {
                width: 100%;
                height: 306px;
            }
        }
    }
}

//柱状图
.columnar :deep(.bar-tooltip) {
    border-radius: 10px !important;
    background-color: rgba(1, 9, 28, 0.7) !important; // border: 1px solid #707070 !important;
    color: #fff;

    .formatter {
        line-height: 25px;
        font-family: "Barlow Condensed";

        i {
            line-height: 20px;
            display: inline-block;
        }

        span {
            font-size: 17px;
            font-weight: bold;
        }

        &:nth-child(1) {
            span {
                color: #1D92FF;
            }
        }

        &:nth-child(2) {
            span {
                color: #31FFBE;
            }
        }

        &:nth-child(3) {
            span {
                color: rgba(254, 186, 87, 1)
            }
        }
    }
}

//饼图
.chartsGl {
    height: 460px;
    width: 450px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.f-pr {
    position: relative;
}

//饼图底座（我也想给你们底座图片 可是我不知道咋给）
.buttomCharts {
    background: center top url('@/assets/images/bigScreen/piebg.png') no-repeat;
    background-size: cover;
    height: 130px;
    width: 433px;
    position: absolute;
    top: 230px;
    left: 0;
}

.chartsGl :deep(.pie-tooltip) {
    padding: 0 !important;
    box-shadow: none !important;

    .fx {
        width: 300px;
        height: 155px;
        background: url('@/assets/images/bigScreen/pietips.png') no-repeat;
        background-size: cover;
        color: #fff;
        font-size: 14px;
        text-align: center;
        padding: 0 37px;
        position: relative;

        .data {
            width: 100%;
            line-height: 33px;
            display: flex;
            justify-content: space-between;
            font-family: "Barlow Condensed";

            .mr {
                margin-left: 13px;
                color: #12FFFC;
                font-size: 24px;
            }

            .mr2 {
                margin-left: 13px;
                color: #FCD45F;
                font-size: 24px;
            }
        }

        .title {
            margin-top: 22px;
            font-size: 19px;
        }

        // .mark-fx {
        //     position: absolute;
        //     bottom: 0;
        //     left: 0;
        //     width: 100%;
        //     height: 50px;
        //     background-image: linear-gradient(to bottom, rgba(2, 21, 59, 1), rgba(2,21,59, 0));
        // }
    }
}

.pie-legend {
    margin-top: 270px;
    padding-bottom: 15px;
    font-family: "Barlow Condensed";

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 16px;

        li {
            width: 50%;
            margin-bottom: 18px;

            .p-title {
                font-size: 16px;
                color: #FFF;
                margin-bottom: 14px;
                align-items: center;

                i {
                    width: 6px;
                    height: 6px;
                    border-radius: 100%;
                    margin-right: 12px;
                }
            }

            .unit {
                font-size: 12px;
                color: #12FFFC;
                font-weight: 600;
            }

            .num {
                font-size: 18px;
                color: #12FFFC;
                margin-right: 14px;
            }

            .percentage {
                font-size: 18px;
                color: #FFF;
            }
        }
    }
}

.f-fx-bt {
    align-items: end;
}

.green {
    color: #30FFF8;
}

.white {
    color: #fff;
    font-size: 13px;
}

@keyframes ani-show {
    0% {
        background-size: 0, 0, 0;
    }

    33% {
        background-size: 0, 0, 22px;
    }

    66% {
        background-size: 0, 20px, 22px;
    }

    100% {
        background-size: 15px, 20px, 22px;
    }
}

@keyframes ani-show2 {
    0% {
        background-size: 0, 0, 0;
    }

    33% {
        background-size: 0, 0, 22px;
    }

    66% {
        background-size: 0, 20px, 22px;
    }

    100% {
        background-size: 15px, 20px, 22px;
    }
}

.bg2 {
    position: absolute;
    left: 16px;
    top: 8px;
    width: 40px;
    height: 40px;
    background-image: url("@/assets/images/bigScreen/classify-bg2.png");
    background-size: 100%;
    background-position: center;
    animation: animate 10s linear infinite;
}

.bg3 {
    left: 36px;
    top: 18px;
}

@keyframes animate {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 10%;
    }
}
/* 动画效果 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

</style>